<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      width: 800px;
      margin: 0 auto;
      background: goldenrod;
    }

    .list_one {
      margin: 20px 0;

    }

    .list_one img {
      width: 20px;
      height: 20px;
    }

    .cover {
      width: 200px;
      height: 150px;
      background: springgreen;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      display: none;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div>
      姓名：<input type="text" id="username">
      <br>
      手机号：<input type="text" id="phone">
      <br>
      评价：<input type="number" id="grade" max="5" min="0"><span>(0-5)</span>
      <br>
      <button id="add">添加</button>
    </div>
    <div class="plist">
      <!-- <div class="list_one">
        <div>1.姓名:撒打发</div>
        <div>手机号:123123123</div>
        <div>
          <span>评分:</span> <img src="./img/1.png" alt="">
        </div>
        <div>
          上传时间：2031-12-12
        </div>
        <div>
          <button>上移</button>
          <button>删除</button>
          <button>下移</button>
        </div>
      </div> -->
    </div>
    <!-- 弹出层 -->
    <div class="cover">用户名，手机号不能为空</div>
  </div>
  <script>
    // 添加 
    var list = []
    if (localStorage.list) {
      list = JSON.parse(localStorage.list)
    } else {
      localStorage.list = JSON.stringify([])
    }
    var add = document.getElementById("add");
    var usernameEle = document.getElementById("username") //用户名
    var phoneEle = document.getElementById("phone"); //手机号
    var gradeEle = document.getElementById("grade");//评分输入框
    var cover = document.querySelector(".cover");//弹出层
    add.onclick = function () {
      console.log(new Date().toLocaleTimeString())
      if (usernameEle.value && phoneEle.value) {
        var obj = {
          username: usernameEle.value,
          phone: phoneEle.value,
          grade: gradeEle.value,
          date: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString().substr(2)
        }
        list.unshift(obj)
        localStorage.list = JSON.stringify(list)
        loadList()//添加完成调用渲染列表
      } else {
        cover.style.display = "block"; //弹出层显示
        var timer = setTimeout(function () { //3秒消失
          cover.style.display = "none";
        }, 3000)
      }
      // 清空
      usernameEle.value = ""
      phoneEle.value = ""
    }
    // 数据渲染-----------------------------------------------------------
    var plist = document.querySelector(".plist")
    function loadList() {
      list = JSON.parse(localStorage.list);
      var str = ""

      for (var i = 0; i < list.length; i++) {
        // 循环生成图片
        // list[i].grade ==== 3
        var imgstr = ''
        for (var j = 1; j <= 5; j++) {
          imgstr += ` <img src="${j <= list[i].grade ? './img/1.png' : './img/0.png'}" alt="">`
        }
        // --------------------------------
        str += `
          <div class="list_one">
          <div>${i + 1}.姓名:${list[i].username}</div>
          <div>手机号:${list[i].phone}</div>
          <div>
            <span>评分:</span>${imgstr}
          </div>
          <div>
            上传时间：${list[i].date}
          </div>
          <div>
            <button ${i == 0 ? 'disabled' : ''} onclick="upAndDown(${i},'up')">上移</button>
            <button class="del" onclick="del(${i})">删除</button>
            <button ${i == list.length - 1 ? 'disabled' : ''} onclick="upAndDown(${i},'down')">下移</button>
          </div>
        </div>
        `
      }
      plist.innerHTML = str;
    }

    loadList()
    // 删除-----------------------------------------
    function del(index) {
      if (confirm("确认删除吗")) {
        list.splice(index, 1);
        localStorage.list = JSON.stringify(list);
        loadList();
      }
    }
    // 上移 下移----------------------------------------------
    function upAndDown(index, status) {
      if (status == "up") {
        [list[index], list[index - 1]] = [list[index - 1], list[index]];
      }
      if (status == "down") {
        [list[index], list[index + 1]] = [list[index + 1], list[index]];
      }
      localStorage.list = JSON.stringify(list);
      loadList();
    }
  </script>
</body>

</html>